<template>
  <!--单位业务招待情况-->
  <div class="bottom-hospitalitySituation">
    <div class="chart-title">单位业务招待情况</div>
    <div id="hospitalitySituation"></div>
  </div>
  <!--业务招待情况-->
  <div class="bottom-businessEntertainment">
    <div class="chart-title">业务招待情况</div>
    <div id="businessEntertainment"></div>
  </div>
  <!--业务招待类型情况-->
  <div class="bottom-businessHospitality">
    <div class="chart-title">业务招待类型情况</div>
    <div id="businessHospitality"></div>
  </div>
  <!--综合类处理流程环节-->
  <div class="bottom-statisticsModule">
    <div class="chart-title">综合类处理流程环节</div>
    <div id="statisticsModule"></div>
  </div>
</template>
<script setup>
import { EChart } from "@/utils/largeScreenEcharts.js";
import * as echarts from "echarts";
import {
  PROCESS_LINKS,
  BUSINESS_HOSPITALITY,
  UNIT_BUSINESS,
  BUSINESS_ENTERTAINMENT,
} from "@/utils/configureTheObject";
import { onMounted } from "vue";
//单位业务招待情况
const hospitalitySituationEcharts = (id) => {
  const { annualName, usedName, annualBudget, budgetUsed } = UNIT_BUSINESS;
  const chartObj = new EChart({ id });
  //获取图表数据
  const { title, series } = chartObj.getOriginalOption(["title", "series"]);
  title.text = `{value|${budgetUsed}}{name|${"元"}}\n{name|${usedName}}`;
  const { centerEffectCircle, innerLayerWithPointer, outermostScale } =
    chartObj.getChartStyle();
  //系列数据
  series.push(
    {
      ...centerEffectCircle,
      data: [
        {
          value: annualBudget,
        },
      ],
      detail: {
        show: true,
        offsetCenter: [0, "145%"],
        formatter: function (value) {
          return `{value|${value}元}\n{title|${annualName}}`;
        },
        rich: {
          value: {
            fontSize: 22,
            color: "#fff",
            lineHeight: 32,
          },
          title: {
            fontSize: 22,
            color: "#32C5FF",
          },
        },
      },
    },
    {
      ...innerLayerWithPointer,
      max: annualBudget,
      data: [
        {
          value: 1792358.76,
        },
      ],
    },
    { ...outermostScale },
  );
  //回传完整配置，执行渲染
  chartObj.setConfig({
    title,
    series,
  });
  //执行渲染
  chartObj.setOption();
};
//业务招待情况
const businessEntertainmentEcharts = () => {
  const myChart = echarts.init(
    document.getElementById("businessEntertainment"),
  );
  //自适应图表
  window.addEventListener(
    "resize",
    () => {
      myChart.resize();
    },
    false,
  );
  const option = {
    tooltip: {
      trigger: "item",
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
      backgroundColor: "rgb(17,95,182)", //设置背景颜色
      formatter: "{b}:{d}%",
    },
    legend: {
      top: "5%",
      orient: "horizontal",
      icon: "rect",
      data: BUSINESS_ENTERTAINMENT.map((item) => item.name),
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        name: "人员类型",
        type: "pie",
        radius: ["43%", "65%"],
        center: ["50%", "60%"],
        label: {
          alignTo: "labelLine",
          formatter: (params) => {
            return params.name
              ? `{dot|}   {d|${params.name} ${params.percent}%}`
              : ``;
          },
          rich: {
            d: {
              fontSize: 14,
              color: "rgba(255, 255, 255, .7)",
            },
            dot: {
              backgroundColor: "auto", // 适应颜色
              width: 0,
              height: 0,
              borderRadius: 3, // 保证是圆角
              fontSize: 16,
              padding: [3, -3, 3, -3], // 这里就保证是要给宽高6的正方形
            },
          },
        },
        color: [
          "#00FFFF",
          "#EBEC2F",
          "#FF7C44",
          "#FA3E5F",
          "#6635EF",
          "#FFAFDA",
        ],
        data: BUSINESS_ENTERTAINMENT.map((item) => {
          return {
            name: item.name,
            value: item.value,
          };
        }),
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);
};
//业务招待类型情况
const businessHospitalityEcharts = () => {
  const myChart = echarts.init(document.getElementById("businessHospitality"));
  //自适应图表
  window.addEventListener(
    "resize",
    () => {
      myChart.resize();
    },
    false,
  );
  const option = {
    tooltip: {
      trigger: "item",
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
      backgroundColor: "rgb(17,95,182)", //设置背景颜色
      formatter: "{b}: {c} ({d}%)",
    },
    legend: {
      top: "5%",
      orient: "horizontal",
      icon: "rect",
      data: BUSINESS_HOSPITALITY.map((item) => item.name),
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        name: "人员类型",
        type: "pie",
        radius: ["43%", "65%"],
        center: ["50%", "60%"],
        label: {
          alignTo: "labelLine",
          formatter: (params) => {
            return params.name
              ? `{dot|}   {d|${params.name} ${params.percent}%}`
              : ``;
          },
          rich: {
            d: {
              fontSize: 14,
              color: "rgba(255, 255, 255, .7)",
            },
            dot: {
              backgroundColor: "auto", // 适应颜色
              width: 0,
              height: 0,
              borderRadius: 3, // 保证是圆角
              fontSize: 16,
              padding: [3, -3, 3, -3], // 这里就保证是要给宽高6的正方形
            },
          },
        },
        color: [
          "#00FFFF",
          "#EBEC2F",
          "#FF7C44",
          "#FA3E5F",
          "#6635EF",
          "#FFAFDA",
        ],
        data: BUSINESS_HOSPITALITY.map((item) => {
          return {
            name: item.name,
            value: item.budgetUsed,
          };
        }),
      },
    ],
  };
  // 绘制图表
  myChart.setOption(option);
};
//综合类处理流程环节
const statisticsModuleEcharts = () => {
  const myChart = echarts.init(document.getElementById("statisticsModule"));
  //自适应图表
  window.addEventListener(
    "resize",
    () => {
      myChart.resize();
    },
    false,
  );
  const data = PROCESS_LINKS.map((item) => {
    return {
      name: item.name,
      value: item.ended,
    };
  });
  const colorList = [
    "#2391FF",
    "#5AD8A6",
    "#FF745A",
    "#FFC328",
    "#73c0de",
    "#3ba272",
  ];
  const option = {
    tooltip: {
      trigger: "item",
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
      backgroundColor: "rgb(17,95,182)", //设置背景颜色
      formatter: function (params) {
        return params.name + ": " + params.value + "%(已结束)";
      },
    },
    legend: {
      data: [],
      top: "5%",
      itemWidth: 12,
      itemHeight: 12,
      icon: "rect",
      itemGap: 10,
      textStyle: {
        color: "#FFF",
        fontSize: 12,
      },
    },
    series: [],
  };
  data.forEach((item, index) => {
    option.series[index] = {
      type: "gauge",
      name: item.name,
      startAngle: 90,
      endAngle: -270,
      radius: `${65 - index * 10}%`,
      center: ["50%", "50%"],
      color: ["red"],
      pointer: {
        show: false,
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: false,
        clip: false,
        itemStyle: {
          color: colorList[index],
        },
      },
      axisLine: {
        lineStyle: {
          width: 10,
          color: [[1, "rgb(35, 55, 80)"]],
        },
      },
      itemStyle: {
        color: "#000",
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      title: {
        show: false,
      },
      data: [item],
      detail: {
        show: false,
      },
    };
    option.legend.data[index] = {
      name: item.name,
      itemStyle: {
        color: colorList[index],
      },
    };
  });
  // 绘制图表
  myChart.setOption(option);
};
onMounted(() => {
  hospitalitySituationEcharts("hospitalitySituation");
  businessEntertainmentEcharts();
  businessHospitalityEcharts();
  statisticsModuleEcharts();
});
</script>

<style scoped lang="less">
.bottom-statisticsModule,
.bottom-businessHospitality,
.bottom-businessEntertainment,
.bottom-hospitalitySituation {
  display: flex;
  flex: 1;
  flex-direction: column;
  .chart-title {
    color: #fff;
    font-size: 20px;
  }
  #hospitalitySituation,
  #businessEntertainment,
  #businessHospitality,
  #statisticsModule {
    width: 100%;
    flex: 1;
  }
}

</style>
